export default {
  props: {
    checkArr: Array,
    focus: Number
  },
  template: `<div class="video-box">
    <template v-for="(item, index) in arr" >
        <div :key="index" :class="['video-item', focus === index  && 'focus']" v-on:click="setCurrent(index)">{{index}}{{item && item.label}} <span class="delete-i" v-on:click.stop="closeItem(item)"> x</span></div>
    </template>

    <div>
        <h1>focus:{{focus}}</h1>
        <h3>checkArr:{{checkArr}}</h3>
    </div>
</div>`,
  data() {
    return {
      // arr: new Array(9)
    };
  },
  mounted(){
      window.videoComp = this
  },
  methods: {
    setCurrent(i) {
      // this.current = i
      this.$emit("update-focus", i);
    },
    closeItem(item) {
      this.$emit("close-item", item);
    },
  },
  computed: {
    arr() {
      // let i = this.current
      // let arr = new Array(9)
      // this.checkArr && this.checkArr.length > 0 &&
      // this.checkArr.forEach(item => {
      //     arr.splice(i, 1, item)
      //     i >= 8 ? i = 0 : i ++
      // })
      return this.checkArr;
    },
  },
};
